<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/index.css">
	<style type="text/css">
		.col-sm-4 {
			padding: 0;
		}

		.row {
			text-align: center;
			margin-top: 35px;
		}

		.glyphicon-star:before {
			font-size: 18px;
			margin-right: 10px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom">
					<span class="word" id="word">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
				<div class="text" id="text">
					<p>
						She bristled ways at the at suggestion that she
						had in any way neglected the child.
						She bristled the suggestion that
						had in any neglected .
					</p>
					<span>social</span>
				</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img1"></div>
					<div class="introduceBlowImg img2" id="img2"></div>
					<div class="introduceBlowImg img3" id="img3"></div>
					<div class="introduceBlowImg img4" id="img4"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg1"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom1">
					<span class="word" id="word1">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao1"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn1">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn1" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
				<div class="text" id="text1">
					<p>
						She bristled ways at the at suggestion that she
						had in any way neglected the child.
						She bristled the suggestion that
						had in any neglected .
					</p>
					<span>social</span>
				</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img11"></div>
					<div class="introduceBlowImg img2" id="img21"></div>
					<div class="introduceBlowImg img3" id="img31"></div>
					<div class="introduceBlowImg img4" id="img41"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg2"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom2">
					<span class="word" id="word2">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao2"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn2">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn2" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
					<div class="text" id="text2">
						<p>
							She bristled ways at the at suggestion that she
							had in any way neglected the child.
							She bristled the suggestion that
							had in any neglected .
						</p>
						<span>social</span>
					</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img12"></div>
					<div class="introduceBlowImg img2" id="img22"></div>
					<div class="introduceBlowImg img3" id="img32"></div>
					<div class="introduceBlowImg img4" id="img42"></div>
				</div>
			</div>
		</div>

	</div>
	<div class="row">
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg3"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom3">
					<span class="word" id="word3">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao3"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn3">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn3" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
				<div class="text" id="text3">
					<p>
						She bristled ways at the at suggestion that she
						had in any way neglected the child.
						She bristled the suggestion that
						had in any neglected .
					</p>
					<span>social</span>
				</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img13"></div>
					<div class="introduceBlowImg img2" id="img23"></div>
					<div class="introduceBlowImg img3" id="img33"></div>
					<div class="introduceBlowImg img4" id="img43"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg4"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom4">
					<span class="word" id="word4">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao4"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn4">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn4" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
				<div class="text" id="text4">
					<p>
						She bristled ways at the at suggestion that she
						had in any way neglected the child.
						She bristled the suggestion that
						had in any neglected .
					</p>
					<span>social</span>
				</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img14"></div>
					<div class="introduceBlowImg img2" id="img24"></div>
					<div class="introduceBlowImg img3" id="img34"></div>
					<div class="introduceBlowImg img4" id="img44"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="photo">
				<div class="img" id="photoImg5"></div>
				<!--<canvas width="341" height="118" id="mycanvas"></canvas>-->
				<div class="photoBottom" id="photoBottom5">
					<span class="word" id="word5">
						<h3>Christopher Walken</h3>
						<span class="glyphicon glyphicon-star"></span>
						<span class="rightSpan">The Deer Hunter</span>
						<div class="sanjiao" id="wordSanjiao5"></div>
						</span>
				</div>
				<div class="btn" id="photoBtn5">
					<span class="glyphicon glyphicon-thumbs-up"></span>
				</div>
			</div>
			<div id="introduceBtn5" class="introduceBtn glyphicon glyphicon-chevron-left"></div>
			<div class="introduce">
				<div class="introduceCenter">
					<div class="text" id="text5">
						<p>
							She bristled ways at the at suggestion that she
							had in any way neglected the child.
							She bristled the suggestion that
							had in any neglected .
						</p>
						<span>social</span>
					</div>
				</div>
				<div class="introduceBlow">
					<div class="introduceBlowImg img1" id="img15"></div>
					<div class="introduceBlowImg img2" id="img25"></div>
					<div class="introduceBlowImg img3" id="img35"></div>
					<div class="introduceBlowImg img4" id="img45"></div>
				</div>
			</div>
		</div>

	</div>
</div>
</body>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</html>